<template>
  <div style="display:flex">
    <!-- <span class="logo_title">
      <i class="iconfont icon-logo"></i><span>后台系统</span>
    </span>
    <el-menu
      :defaultActive="path" router
      class="el-menu-demo"
      mode="horizontal"
      backgroundColor="#36a9e1"
      textColor="#fff"
      activeTextColor="#ffd04b"
      style="flex:1;height:60px;overflow:hidden"
    >
      <el-menu-item index="/glhome">首页</el-menu-item>
      <el-menu-item index="/glperformance">绩效考核</el-menu-item>
      <el-menu-item index="/glpm">项目管理</el-menu-item>
      <el-menu-item index="/gldepartment">单位管理</el-menu-item>
      <el-menu-item index="/glzhibiao">指标管理</el-menu-item>
      <el-menu-item index="/glsa">统计分析</el-menu-item>
      <el-menu-item index="/glmanager">系统管理</el-menu-item>
      <span class="demonstration">欢迎您，管理部门</span>
    </el-menu> -->


    <span class="logo_title" @click="gohome">
      <img src="/images/logo.png" height="35"><span style="margin-left:5%">办事处绩效考核</span>
    </span>
    <el-menu
      style="flex:1;height:60px;overflow:hidden"
      :defaultActive="path" router
      class="el-menu-demo"
      mode="horizontal"
      backgroundColor="#778e9f"
      textColor="#fff"
      activeTextColor="#ffd04b"
    >

      <el-menu-item v-for="item in sideMenu" :key="item.id" :index="item.hash.load_page">{{item.hash.funcname}}</el-menu-item>
      <span class="demonstration">欢迎您，{{username}}&nbsp;&nbsp;&nbsp;&nbsp;<b class="mm" @click="showmm=true">修改密码</b>&nbsp;&nbsp;<span @click="userQuit" class="quit">退出</span></span>
    </el-menu>

    <!--
    <span class="logo_title">
      <i class="iconfont icon-logo"></i><span>后台系统</span>
    </span>
    <el-menu
      :defaultActive="path" router
      class="el-menu-demo"
      mode="horizontal"
      backgroundColor="#36a9e1"
      textColor="#fff"
      activeTextColor="#ffd04b"
      style="flex:1;height:60px;overflow:hidden"
    >

      <el-menu-item index="/qthome">首页</el-menu-item>
      <el-menu-item index="/qtzhibiao">指标填报</el-menu-item>
      <el-menu-item index="/qtpm">项目管理</el-menu-item>
      <el-menu-item index="/qttable">统计分析</el-menu-item>
      <span class="demonstration">欢迎您，牵头部门</span>
    </el-menu>
     -->
    <el-dialog
      title="修改密码"
      :visible.sync="showmm"
      width="40%"
    >
      <el-form labelWidth="140px" :rules="rules" :model="form1" ref="form1">
        <el-form-item label="旧密码" prop="pw1">
          <el-input v-model="form1.pw1"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="pw2">
          <el-input v-model="form1.pw2" clearable type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="pw3">
          <el-input v-model="form1.pw3" clearable type="password"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showmm = false">取 消</el-button>
        <el-button type="primary" @click="savemm(form1)">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.form1.pw3 !== '') {
          this.$refs.form1.validateField('pw3');
        }
        callback();
      }
    };
    const validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.form1.pw2) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {

      form1: {
        pw1: '',
        pw2: '',
        pw3: '',
      },
      rules: {
        pw1: [
          {
            required: true, // 是否必填
            message: '不能为空', // 规则
            trigger: 'blur', // 何事件触发
          },
        ],
        pw2: [
          { validator: validatePass, trigger: 'blur', required: true },
        ],
        pw3: [
          { validator: validatePass2, trigger: 'blur', required: true },
        ],
      },
      showmm: false,
      sideMenu: [],
      ts: this.newStore(),
      username: localStorage.getItem('username'),
    };
  },
  created() {
    if (localStorage.getItem('token') != null && localStorage.getItem('token') != '') { this.getSidemenu(); }
    this.username = localStorage.getItem('username');
  },
  methods: {
    savemm() {
      this.$refs.form1.validate((valid) => {
        if (valid) {
          const req = {
            handle: 'E299744D88ADCDF5A77F3C564BE5A0586B7ADB91A3DFE0FAA687B580C0B7FD7F',
            oldpwd: this.form1.pw1,
            newpwd1: this.form1.pw2,
          };
          this.$confirm('确定修改?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.spost(this.ts, '/mainservlet', req).then(() => {
              this.$message({
                type: 'success',
                message: '修改成功!',
              });
              localStorage.removeItem('token');
              localStorage.removeItem('username');
              this.$message({
                type: 'success',
                message: '请重新登陆',
              });
              this.$router.push('/login');
              this.showmm = false;
            });
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消',
            });
          });
        } else {
          this.$message.error('密码不一致！');
          return false;
        }
      });
    },
    gohome() {
      if (localStorage.getItem('belongunit') != '2') {
        this.$router.push('/glperformance');
      } else {
        this.$router.push('/qzjx/jxdf');
      }
    },
    getSidemenu() {
      const req = {
        handle: '67A5B6FEF17D97DECF116BDF95B95C0B078C37EB4CBA2359',
        supid: '1',
      };

      this.spost(this.ts, '/mainservlet', req).then((ts) => {
        this.sideMenu = ts.d.data.operation1;
      });
    },
    userQuit() {
      this.$confirm('确认退出登录？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        localStorage.removeItem('token');
        localStorage.removeItem('username');
        this.$message({
          type: 'success',
          message: '已退出',
        });
        this.$router.push('/login');
        // this.$router.push('houseManage');
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
        });
      });
    },
  },
  computed: {
    path() {
      return `/${this.$route.path.split('/')[1]}`;
    },
  },
};
</script>

<style lang="stylus" scoped>
.mm
  text-decoration underline
  &:hover
    color #ccc
.el-menu--horizontal
  border-bottom 0
.demonstration
  height 60px
  line-height 60px
  float right
  padding-right 4%
  color #ffffff
  cursor pointer
.logo_title
  height 60px
  width 200px
  float left
  line-height 60px
  font-size 18px
  color #fff
  cursor pointer
  background #657a8a
  i
    font-size 30px
    color #f4ea0c
    display inline-block
    width 40%
    text-align center
    height 100%
    float left
</style>

